<!doctype html>
<html lang="zh-Hans">
<head>
	<meta name="generator" content="Hugo 0.74.3" />
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<meta name="hugo-theme" content="Axiom 0.7.1">



  <link rel="icon" type="image/png" sizes="32x32" href="/blog/">
  <link rel="icon" type="image/x-icon" href="/blog/">
  <link rel="apple-touch-icon" href="/blog/">
  <link rel="canonical" href="https://Mia-zhao.gitee.io/blog/">
  <link rel="alternate" type="application/rss+xml" href="https://Mia-zhao.gitee.io/blog/index.xml" hreflang="zh-Hans">
<link rel="preload" as="style" href="/blog/bundle.css?v=1603792187" media="all">
<link rel="stylesheet" href="/blog/bundle.css?v=1603792187" media="all">
<style>.cdata pre{color:#edf2f7;background-color:#2d3748}.cdata :not(pre)>code{color:#805ad5;background-color:#f7fafc}.chroma .err{color:#fed7d7;background-color:#9b2c2c}.chroma .hl{background-color:#4a5568}.chroma .ln{color:#a0aec0}.chroma .k,.chroma .kc,.chroma .kd,.chroma .kn,.chroma .kp,.chroma .kr{color:#63b3ed}.chroma .kt{color:#b794f4}.chroma .na{color:#f6e05e}.chroma .nb{color:#f6ad55}.chroma .nc{color:#fc8181}.chroma .no{color:#68d391}.chroma .nd{color:#fc8181}.chroma .ne{color:#fc8181}.chroma .nf{color:#f6ad55}.chroma .nt{color:#fc8181}.chroma .l{color:#b794f4}.chroma .dl,.chroma .ld,.chroma .s,.chroma .s2,.chroma .sa,.chroma .sb,.chroma .sc,.chroma .sd{color:#68d391}.chroma .se{color:#a0aec0}.chroma .s1,.chroma .sh,.chroma .si,.chroma .sr,.chroma .ss,.chroma .sx{color:#68d391}.chroma .il,.chroma .m,.chroma .mb,.chroma .mf,.chroma .mh,.chroma .mi,.chroma .mo{color:#b794f4}.chroma .o,.chroma .ow{color:#90cdf4}.chroma .p{color:#cbd5e0}.chroma .c,.chroma .c1,.chroma .ch,.chroma .cm,.chroma .cp,.chroma .cpf,.chroma .cs{color:#a0aec0}.chroma .ge{font-style:italic}.chroma .gs{font-weight:700}</style>



<title>Mia&#39;s Blogs : Mia&#39;s Blog Posts</title>

<meta property="og:title" content="Mia&#39;s Blogs">
<meta property="og:site_name" content="Mia&#39;s Blog Posts">
<meta property="og:url" content="https://Mia-zhao.gitee.io/blog/">
<link rel="image_src" href="https://Mia-zhao.gitee.io/blog/">
<meta property="og:image" content="https://Mia-zhao.gitee.io/blog/">
<meta property="og:image:width" content="">
<meta property="og:image:height" content="">
<meta property="og:type" content="website">
<meta property="og:locale" content="zh_Hans">
<meta property="og:description" content="Welcome to Mia&#39;s blogs 这里的博客作为个人学习前端知识的笔记。在加深印象和理解的同时，记录下一些重点以及遇到的问题。C s sD o mH t m lJavascriptJqueryM v cReactU r lVueVue 3Vue i18nImplement an Event EmitterI was asked to implement an event emitter class in one of the front-end job interviews. A few APIs were given in the interview question and an emitter class should fulfill...Oct 26, 2020 4:00PMVue 之 修饰符事件修饰符 在事件处理中使用event.">
<meta name="description" content="Welcome to Mia&#39;s blogs 这里的博客作为个人学习前端知识的笔记。在加深印象和理解的同时，记录下一些重点以及遇到的问题。C s sD o mH t m lJavascriptJqueryM v cReactU r lVueVue 3Vue i18nImplement an Event EmitterI was asked to implement an event emitter class in one of the front-end job interviews. A few APIs were given in the interview question and an emitter class should fulfill...Oct 26, 2020 4:00PMVue 之 修饰符事件修饰符 在事件处理中使用event.">
<meta property="og:updated_time" content="2020-10-26T08:00:00Z">
<meta property="fb:app_id" content="">
<meta name="author" content="Mia Zhao">
<meta property="article:author" content="https://mia-zhao.gitee.io/">
<meta property="article:published_time" content="2020-10-26T08:00:00Z">
<meta property="article:modified_time" content="2020-10-26T08:00:00Z">
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "headline": "Mia's Blogs",
  "alternativeHeadline": "Welcome to Mia's blogs 这里的博客作为个人学习前端知识的笔记。在加深印象和理解的同时，记录下一些重点以及遇到的问题。\r\r\rC s sD o mH t m lJavascriptJqueryM v cReactU r lVueVue 3Vue i18n\r\rImplement an Event Emitter\rI was asked to implement an event emitter class in one of the front-end job interviews. A few APIs were given in the interview question and an emitter class should fulfill...\rOct 26, 2020 4:00PM\r\r\r\rVue 之 修饰符\r事件修饰符 在事件处理中使用event.",
  "url": "https://Mia-zhao.gitee.io/blog/",
  "image": "https://Mia-zhao.gitee.io/blog/",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://Mia-zhao.gitee.io/blog/"
  },
  "description": "Welcome to Mia's blogs 这里的博客作为个人学习前端知识的笔记。在加深印象和理解的同时，记录下一些重点以及遇到的问题。\r\r\rC s sD o mH t m lJavascriptJqueryM v cReactU r lVueVue 3Vue i18n\r\rImplement an Event Emitter\rI was asked to implement an event emitter class in one of the front-end job interviews. A few APIs were given in the interview question and an emitter class should fulfill...\rOct 26, 2020 4:00PM\r\r\r\rVue 之 修饰符\r事件修饰符 在事件处理中使用event.",
  "author": {
    "@type": "Person",
    "name": "Mia Zhao"
  },
  "publisher": {
    "@type": "Organization",
    "name": "Mia's Blog Posts",
    "logo": {
      "@type": "ImageObject",
      "url": "https://Mia-zhao.gitee.io/blog/"
    }
  },
  "datePublished": "2020-10-26T08:00:00Z",
  "dateModified": "2020-10-26T08:00:00Z",
  "articleBody": "\r\n\u003cdiv class=\"section flex justify-center\"\u003e\r\n  \u003cdiv class=\"section-inner flex-grow min-w-0 mx-4 sm:mx-8 mt-8 max-w-5xl cdata\"\u003e\r\n    \u003cfigure\u003e\r\n\u003cimg\r\nclass=\"mb-2 mx-auto leading-none shadow-xl\"\r\nsrc=\"/blog/images/cover.webp\"\u003e\r\n\u003c/figure\u003e\r\n\r\n  \u003c/div\u003e\r\n\u003c/div\u003e\r\n\r\n\r\n\u003cdiv class=\"section flex justify-center\"\u003e\r\n  \u003cdiv class=\"section-inner flex-grow min-w-0 mx-4 sm:mx-8 mt-9 max-w-4xl cdata\"\u003e\r\n    \u003ch1 id=\"welcome-to-mias-blogs\"\u003eWelcome to Mia's blogs\u003c/h1\u003e\n\u003cp class=\"lead\"\u003e这里的博客作为个人学习前端知识的笔记。在加深印象和理解的同时，记录下一些重点以及遇到的问题。\r\n  \u003c/div\u003e\r\n\u003c/div\u003e\r\n\r\n\r\n\u003cdiv class=\"section flex justify-center\"\u003e\r\n  \u003cdiv class=\"section-inner flex-grow min-w-0 mx-4 sm:mx-8 mt-9 max-w-2xl cdata\"\u003e\r\n    \r\n\u003cdiv class=\"flex flex-wrap justify-center\"\u003e\u003ca class=\"rounded font-content-sans font-semibold text-raven-700 bg-raven-100 hover:bg-raven-200 py-2 px-4 m-2\" href=\"https://Mia-zhao.gitee.io/blog/tags/css/\"\u003eC s s\u003c/a\u003e\u003ca class=\"rounded font-content-sans font-semibold text-raven-700 bg-raven-100 hover:bg-raven-200 py-2 px-4 m-2\" href=\"https://Mia-zhao.gitee.io/blog/tags/dom/\"\u003eD o m\u003c/a\u003e\u003ca class=\"rounded font-content-sans font-semibold text-raven-700 bg-raven-100 hover:bg-raven-200 py-2 px-4 m-2\" href=\"https://Mia-zhao.gitee.io/blog/tags/html/\"\u003eH t m l\u003c/a\u003e\u003ca class=\"rounded font-content-sans font-semibold text-raven-700 bg-raven-100 hover:bg-raven-200 py-2 px-4 m-2\" href=\"https://Mia-zhao.gitee.io/blog/tags/javascript/\"\u003eJavascript\u003c/a\u003e\u003ca class=\"rounded font-content-sans font-semibold text-raven-700 bg-raven-100 hover:bg-raven-200 py-2 px-4 m-2\" href=\"https://Mia-zhao.gitee.io/blog/tags/jquery/\"\u003eJquery\u003c/a\u003e\u003ca class=\"rounded font-content-sans font-semibold text-raven-700 bg-raven-100 hover:bg-raven-200 py-2 px-4 m-2\" href=\"https://Mia-zhao.gitee.io/blog/tags/mvc/\"\u003eM v c\u003c/a\u003e\u003ca class=\"rounded font-content-sans font-semibold text-raven-700 bg-raven-100 hover:bg-raven-200 py-2 px-4 m-2\" href=\"https://Mia-zhao.gitee.io/blog/tags/react/\"\u003eReact\u003c/a\u003e\u003ca class=\"rounded font-content-sans font-semibold text-raven-700 bg-raven-100 hover:bg-raven-200 py-2 px-4 m-2\" href=\"https://Mia-zhao.gitee.io/blog/tags/url/\"\u003eU r l\u003c/a\u003e\u003ca class=\"rounded font-content-sans font-semibold text-raven-700 bg-raven-100 hover:bg-raven-200 py-2 px-4 m-2\" href=\"https://Mia-zhao.gitee.io/blog/tags/vue/\"\u003eVue\u003c/a\u003e\u003ca class=\"rounded font-content-sans font-semibold text-raven-700 bg-raven-100 hover:bg-raven-200 py-2 px-4 m-2\" href=\"https://Mia-zhao.gitee.io/blog/tags/vue-3/\"\u003eVue 3\u003c/a\u003e\u003ca class=\"rounded font-content-sans font-semibold text-raven-700 bg-raven-100 hover:bg-raven-200 py-2 px-4 m-2\" href=\"https://Mia-zhao.gitee.io/blog/tags/vue-i18n/\"\u003eVue i18n\u003c/a\u003e\r\n\u003c/div\u003e\r\n\r\n\r\n\u003cdiv class=\"mt-8\"\u003e\r\n  \u003cdiv class=\"summary sm:flex\"\u003e\r\n  \u003cdiv class=\"summary-content font-content-sans\"\u003e\r\n    \u003ca class=\"summary-title block font-semibold leading-tightly tracking-tightly text-2xl text-raven-800 hover:text-raven-900\" href=\"/blog/implement-an-event-emitter/\"\u003eImplement an Event Emitter\u003c/a\u003e\r\n    \u003ca class=\"summary-excerpt mt-2 block font-normal leading-tight tracking-normal text-base text-raven-500 hover:text-raven-600\" href=\"/blog/implement-an-event-emitter/\"\u003eI was asked to implement an event emitter class in one of the front-end job interviews. A few APIs were given in the interview question and an emitter class should fulfill...\u003c/a\u003e\r\n    \u003caside class=\"summary-meta mt-6 font-normal leading-snug tracking-normal text-sm text-raven-500\"\u003e\u003ctime datetime=\"2020-10-26T08:00:00Z\"\u003eOct 26, 2020 4:00PM\u003c/time\u003e\u003c/aside\u003e\r\n  \u003c/div\u003e\r\n\u003c/div\u003e\r\n\r\n\u003c/div\u003e\r\n\u003cdiv class=\"mt-8\"\u003e\r\n  \u003cdiv class=\"summary sm:flex\"\u003e\r\n  \u003cdiv class=\"summary-content font-content-sans\"\u003e\r\n    \u003ca class=\"summary-title block font-semibold leading-tightly tracking-tightly text-2xl text-raven-800 hover:text-raven-900\" href=\"/blog/vue-%E4%B9%8B-%E4%BF%AE%E9%A5%B0%E7%AC%A6/\"\u003eVue 之 修饰符\u003c/a\u003e\r\n    \u003ca class=\"summary-excerpt mt-2 block font-normal leading-tight tracking-normal text-base text-raven-500 hover:text-raven-600\" href=\"/blog/vue-%E4%B9%8B-%E4%BF%AE%E9%A5%B0%E7%AC%A6/\"\u003e事件修饰符 在事件处理中使用event.preventDefault()或者event.stopPropagation()的情况很常见，为了剥离数据逻辑以及 DOM 事件处理，Vue 提供 .stop .prevent .capture .self .once .passive 修饰符给v-on指令。修饰符可以链式使用，例如: \u0026lt;a...\u003c/a\u003e\r\n    \u003caside class=\"summary-meta mt-6 font-normal leading-snug tracking-normal text-sm text-raven-500\"\u003e\u003ctime datetime=\"2020-10-11T06:00:00Z\"\u003eOct 11, 2020 2:00PM\u003c/time\u003e\u003c/aside\u003e\r\n  \u003c/div\u003e\r\n\u003c/div\u003e\r\n\r\n\u003c/div\u003e\r\n\u003cdiv class=\"mt-8\"\u003e\r\n  \u003cdiv class=\"summary sm:flex\"\u003e\r\n  \u003cdiv class=\"summary-content font-content-sans\"\u003e\r\n    \u003ca class=\"summary-title block font-semibold leading-tightly tracking-tightly text-2xl text-raven-800 hover:text-raven-900\" href=\"/blog/vue.js-vs-vue.runtime.js/\"\u003evue.js vs vue.runtime.js\u003c/a\u003e\r\n    \u003ca class=\"summary-excerpt mt-2 block font-normal leading-tight tracking-normal text-base text-raven-500 hover:text-raven-600\" href=\"/blog/vue.js-vs-vue.runtime.js/\"\u003e根据 Vue 官方文档，Vue 提供不同构建版本，包括：完整版 (vue.js)，运行时版 (vue.runtime.js)。完整版以及运行时版还有他们的生产环境版 vue.min.js 以及 vue.runtime.min.js。 区别 完整版包含编译器和运行时版本。编译器的作用是将模板字符串编译称为 JavaScript 渲染函数的代码。 例...\u003c/a\u003e\r\n    \u003caside class=\"summary-meta mt-6 font-normal leading-snug tracking-normal text-sm text-raven-500\"\u003e\u003ctime datetime=\"2020-10-09T06:40:00Z\"\u003eOct 9, 2020 2:40PM\u003c/time\u003e\u003c/aside\u003e\r\n  \u003c/div\u003e\r\n\u003c/div\u003e\r\n\r\n\u003c/div\u003e\r\n\r\n\r\n  \u003c/div\u003e\r\n\u003c/div\u003e"
}
</script>

<link rel="preload" as="script" href="/blog/bundle.js?v=1603792187">


</head>
<body>

  <header id="nav" class="header">
  <div class="ax-l-i max-w-6xl">
    <div class="ax-logo">
      <a class="block" href="/blog/" title="Mia&#39;s Blog Posts"><span class="font-semibold text-raven-900">Mia's Blog Posts</span></a>
    </div>
    <div class="ax-user">
      <a class="p-2 w-8 h-8 block text-raven-500 hover:text-gray-800 focus:text-gray-800 focus:outline-none" target="_blank" rel="noopener nofollow" href="https://www.google.com/search?q=site:https://Mia-zhao.gitee.io/blog/" title="Search">
        <svg class="fill-current" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M2.67 12.804c0-5.6 4.544-10.134 10.133-10.134s10.134 4.544 10.134 10.134-4.544 10.133-10.134 10.133S2.67 18.393 2.67 12.804zm28.943 16.923l-8.868-8.868c4.287-5.3 3.68-13.012-1.378-17.57S8.564-1.066 3.75 3.75s-5.017 12.558-.46 17.618 12.28 5.665 17.57 1.378l8.868 8.868a1.33 1.33 0 0 0 2.231-.597c.123-.46-.008-.952-.345-1.29h0z"/></svg>

      </a>
      <a class="p-2 block text-base leading-none text-raven-500 hover:text-gray-800 focus:text-gray-800 focus:outline-none" href="/blog/posts/">
        Posts
      </a>
    </div>
  </div>

  
</header>

  <main>

<div class="section flex justify-center">
  <div class="section-inner flex-grow min-w-0 mx-4 sm:mx-8 mt-8 max-w-5xl cdata">
    <figure>
<img
class="mb-2 mx-auto leading-none shadow-xl"
src="/blog/images/cover.webp">
</figure>

  </div>
</div>


<div class="section flex justify-center">
  <div class="section-inner flex-grow min-w-0 mx-4 sm:mx-8 mt-9 max-w-4xl cdata">
    <h1 id="welcome-to-mias-blogs">Welcome to Mia's blogs</h1>
<p class="lead">这里的博客作为个人学习前端知识的笔记。在加深印象和理解的同时，记录下一些重点以及遇到的问题。
  </div>
</div>


<div class="section flex justify-center">
  <div class="section-inner flex-grow min-w-0 mx-4 sm:mx-8 mt-9 max-w-2xl cdata">
    
<div class="flex flex-wrap justify-center"><a class="rounded font-content-sans font-semibold text-raven-700 bg-raven-100 hover:bg-raven-200 py-2 px-4 m-2" href="https://Mia-zhao.gitee.io/blog/tags/css/">C s s</a><a class="rounded font-content-sans font-semibold text-raven-700 bg-raven-100 hover:bg-raven-200 py-2 px-4 m-2" href="https://Mia-zhao.gitee.io/blog/tags/dom/">D o m</a><a class="rounded font-content-sans font-semibold text-raven-700 bg-raven-100 hover:bg-raven-200 py-2 px-4 m-2" href="https://Mia-zhao.gitee.io/blog/tags/html/">H t m l</a><a class="rounded font-content-sans font-semibold text-raven-700 bg-raven-100 hover:bg-raven-200 py-2 px-4 m-2" href="https://Mia-zhao.gitee.io/blog/tags/javascript/">Javascript</a><a class="rounded font-content-sans font-semibold text-raven-700 bg-raven-100 hover:bg-raven-200 py-2 px-4 m-2" href="https://Mia-zhao.gitee.io/blog/tags/jquery/">Jquery</a><a class="rounded font-content-sans font-semibold text-raven-700 bg-raven-100 hover:bg-raven-200 py-2 px-4 m-2" href="https://Mia-zhao.gitee.io/blog/tags/mvc/">M v c</a><a class="rounded font-content-sans font-semibold text-raven-700 bg-raven-100 hover:bg-raven-200 py-2 px-4 m-2" href="https://Mia-zhao.gitee.io/blog/tags/react/">React</a><a class="rounded font-content-sans font-semibold text-raven-700 bg-raven-100 hover:bg-raven-200 py-2 px-4 m-2" href="https://Mia-zhao.gitee.io/blog/tags/url/">U r l</a><a class="rounded font-content-sans font-semibold text-raven-700 bg-raven-100 hover:bg-raven-200 py-2 px-4 m-2" href="https://Mia-zhao.gitee.io/blog/tags/vue/">Vue</a><a class="rounded font-content-sans font-semibold text-raven-700 bg-raven-100 hover:bg-raven-200 py-2 px-4 m-2" href="https://Mia-zhao.gitee.io/blog/tags/vue-3/">Vue 3</a><a class="rounded font-content-sans font-semibold text-raven-700 bg-raven-100 hover:bg-raven-200 py-2 px-4 m-2" href="https://Mia-zhao.gitee.io/blog/tags/vue-i18n/">Vue i18n</a>
</div>


<div class="mt-8">
  <div class="summary sm:flex">
  <div class="summary-content font-content-sans">
    <a class="summary-title block font-semibold leading-tightly tracking-tightly text-2xl text-raven-800 hover:text-raven-900" href="/blog/implement-an-event-emitter/">Implement an Event Emitter</a>
    <a class="summary-excerpt mt-2 block font-normal leading-tight tracking-normal text-base text-raven-500 hover:text-raven-600" href="/blog/implement-an-event-emitter/">I was asked to implement an event emitter class in one of the front-end job interviews. A few APIs were given in the interview question and an emitter class should fulfill...</a>
    <aside class="summary-meta mt-6 font-normal leading-snug tracking-normal text-sm text-raven-500"><time datetime="2020-10-26T08:00:00Z">Oct 26, 2020 4:00PM</time></aside>
  </div>
</div>

</div>
<div class="mt-8">
  <div class="summary sm:flex">
  <div class="summary-content font-content-sans">
    <a class="summary-title block font-semibold leading-tightly tracking-tightly text-2xl text-raven-800 hover:text-raven-900" href="/blog/vue-%E4%B9%8B-%E4%BF%AE%E9%A5%B0%E7%AC%A6/">Vue 之 修饰符</a>
    <a class="summary-excerpt mt-2 block font-normal leading-tight tracking-normal text-base text-raven-500 hover:text-raven-600" href="/blog/vue-%E4%B9%8B-%E4%BF%AE%E9%A5%B0%E7%AC%A6/">事件修饰符 在事件处理中使用event.preventDefault()或者event.stopPropagation()的情况很常见，为了剥离数据逻辑以及 DOM 事件处理，Vue 提供 .stop .prevent .capture .self .once .passive 修饰符给v-on指令。修饰符可以链式使用，例如: &lt;a...</a>
    <aside class="summary-meta mt-6 font-normal leading-snug tracking-normal text-sm text-raven-500"><time datetime="2020-10-11T06:00:00Z">Oct 11, 2020 2:00PM</time></aside>
  </div>
</div>

</div>
<div class="mt-8">
  <div class="summary sm:flex">
  <div class="summary-content font-content-sans">
    <a class="summary-title block font-semibold leading-tightly tracking-tightly text-2xl text-raven-800 hover:text-raven-900" href="/blog/vue.js-vs-vue.runtime.js/">vue.js vs vue.runtime.js</a>
    <a class="summary-excerpt mt-2 block font-normal leading-tight tracking-normal text-base text-raven-500 hover:text-raven-600" href="/blog/vue.js-vs-vue.runtime.js/">根据 Vue 官方文档，Vue 提供不同构建版本，包括：完整版 (vue.js)，运行时版 (vue.runtime.js)。完整版以及运行时版还有他们的生产环境版 vue.min.js 以及 vue.runtime.min.js。 区别 完整版包含编译器和运行时版本。编译器的作用是将模板字符串编译称为 JavaScript 渲染函数的代码。 例...</a>
    <aside class="summary-meta mt-6 font-normal leading-snug tracking-normal text-sm text-raven-500"><time datetime="2020-10-09T06:40:00Z">Oct 9, 2020 2:40PM</time></aside>
  </div>
</div>

</div>


  </div>
</div>

  </main>
  <footer class="footer">
  <div class="ax-l-i max-w-6xl">
    <nav class="flex items-center justify-center">
      <a class="ml-3 first:ml-0 text-sm text-gray-600 hover:text-gray-800" href="/blog/posts/">Posts</a>
      <a class="ml-3 first:ml-0 text-sm text-gray-600 hover:text-gray-800" href="/blog/contact/">Contact</a>
    </nav>

    <div class="footer-copyright text-sm text-center text-gray-500 mt-4">
      &#169; -2020 Mia&#39;s Blog Posts
    </div>
    <div class="text-sm sm:text-xs text-center text-gray-500 mt-2">
      Powered by <a href="https://www.axiomtheme.com/?utm_source=theme-footer&utm_medium=website&utm_campaign=referral">Axiom</a>
    </div>
  </div>
</footer>

<script src="/blog/bundle.js?v=1603792187"></script>


</body>
</html>
